<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <header>
                <span @click="propHide">取消</span>
                <span @click="confirm">确定</span>
            </header>
            <div class="demo8_main">
                <noData v-if="arr1 == 0"></noData>
                <div class="list3Box">
                    <checklist :options="arr1"
                               v-model="checklist"
                               @on-change="change"></checklist>
                </div>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Checklist } from 'vux'
export default {
    name: 'companyProp',
    directives: {
        TransferDom
    },
    data () {
        return {
            propShow: false,
            checklist: [],
            parmas: {
                allowPaging: 'false',
                business: 'GetAccidentType',
                tokenId: '',
                userId: ''
            },
            arr1: [],
            nameArr: []
        }
    },
    components: {
        Popup,
        Checklist
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.dataArr()
    },
    props: {
        accidentPropShow: {
            type: Boolean,
            default: false
        },
        selectAccident: {
            type: Function
        }
    },
    watch: {
        accidentPropShow (newVal) {
            this.propShow = newVal
        }
    },
    methods: {
        change (value) {
            if (value.indexOf('全部') === -1) {
                this.nameArr = value
            } else {
                this.nameArr = ''
            }
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then((res) => {
                if (res.status) {
                    if (res.data.data) {
                        this.arr1 = res.data.data
                    }
                }
            })
        },
        confirm () {
            this.selectAccident(this.nameArr)
        },
        propHide () {
            this.$parent.accidentPropShow = false
        }
    }
}
</script>
<style scoped>
header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
}
header span:first-child {
    font-size: 14px;
    color: #333;
}
header span:last-child {
    font-size: 14px;
    color: cornflowerblue;
}
.company-nav {
    min-height: 40px;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    overflow-x: scroll;
}
.company-nav ul {
    display: flex;
    align-items: center;
}
.company-nav li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    line-height: 28px;
    white-space: nowrap;
}
.company-nav li p {
    color: #419df7;
    padding: 0 5px;
}
.company-nav li:last-child p {
    color: #333;
}
.company-nav span {
    margin-right: 4px;
}
.company-content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.company-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.company-name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
</style>
